import React, { useState } from 'react';
import { Form, Row, Col, Input, Button, DatePicker, Select } from 'antd';
import './search.less'
import './search.css'

const Option = Select.Option;
const {RangePicker}=DatePicker;
const SearchForm = (props) => {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    props.handleSubmit(values)
  };
  const onReset = (values) => {
    form.resetFields(); // 重置表单
    props.handleSubmit(values)
  };

  return (
    <Form className='searchForm'
    form={form}
    layout="vertical"
    onFinish={onFinish}>
    <Row>
   
        <Col span={8}>
          <Form.Item
            label="活动名称："
            name="activityName"
          >
            <Input />
          </Form.Item>

        </Col>
        <Col span={9}>
          <Form.Item label="创建时间：" name="startDate" >
          <RangePicker />
          </Form.Item>
        </Col>
        <Col span={7} >
          <div className='searchButton'>
          <Form.Item  >
            <div className="Space8">
              <Button className='search'
                type="primary"
                htmlType="submit">
                搜索
               </Button>
              <Button className='addbtn'
                htmlType="button"
                onClick={onReset}>
                重置
              </Button>
            </div>
          </Form.Item>
          </div>
        </Col>

  
    </Row>
    </Form>
  );

};
export default SearchForm